<!--  -->
<template>
  <scrollbar>
    <div id="search-page">
      <div class="search-page-container">
        <searchnavbar></searchnavbar>
        <div class="search-page-content">
          <div class="left">
            <topics
              :topicData="posts"
              :collectButtonVis="true"
              :operationBarVis="true"
            ></topics>
          </div>
          <div class="right"></div>
        </div>
      </div>
    </div>
    </scrollbar>
</template>

<script>
import Topics from "../components/common/topics.vue";
import { mapGetters, mapMutations } from "vuex";
import { handleTopics } from "../utils/utils";
import Searchnavbar from "../components/searchcomponent/searchnavbar.vue";
import Scrollbar from '../components/common/scrollbar/scrollbar.vue';

export default {
  data() {
    return {
      posts: "",
      y_postion: 0,
    };
  },

  components: { Topics, Searchnavbar, Scrollbar },

  computed: {
    ...mapGetters(["user"]),
    pageScrolled(){
      return this.$store.getters.pageScrolled
    }
  },

  // mounted() {
  //   window.addEventListener("scroll", this.scrollObserver, true);
  // },

  methods: {
    test() {
      let keyword = this.$route.query.keyword
      const that = this;
      this.$getApi.searchPost(keyword).then((res) => {
        console.log("shift");
        that.posts = res.data.posts;
        that.posts = handleTopics(
          res.data.posts,
          res.data.like,
          res.data.collection
        );
        let subcom = res.data.communityInformation;
        console.log(subcom);
      });
    },
    // scrollObserver() {
    //   let scrolledY = window.pageYOffset|| document.documentElement.scrollTop || document.body.scrollTop;
    //   var direction = scrolledY - this.y_postion;
    //   this.y_postion = scrolledY;
    //   console.log(direction);
    //   if (scrolledY >= 60) {
    //     this.setNavOffSetY(-50);
    //     if (direction <= 0) this.setNavOffSetY(0);
    //   } else if (scrolledY > 0 && scrolledY < 52) {
    //     this.setNavOffSetY(0);
    //   } else {
    //     this.isfixed = false;
    //   }
    // },
    ...mapMutations(["setNavbarVisibility", "setNavOffSetY"]),
  },
  created() {
    this.test();
  },
  // destroyed() {
  //   window.removeEventListener("scroll", this.scrollObserver, true);
  // },
  watch:{
    pageScrolled(newval){//监听页面滚动距离
      console.log('pageScrolled',newval)
      let direction
      const that = this
      let temp = newval
      setTimeout(() => {
        console.log("timeoutfunc",temp)
        that.y_postion=temp
      }, 0.1);
       direction = newval - this.y_postion;//页面滚动方向
      console.log('newval:',newval,'y_positino',this.y_postion)
      console.log('direction',direction)
      if (newval >= 51) {
        if (direction <= 0) this.setNavOffSetY(0);
        else this.setNavOffSetY(-50)
      } else if (newval > 0 && newval < 50) {
        this.setNavOffSetY(0);
      } 
      else{
        this.setNavOffSetY(0)
      }
    },
    '$route.query.keyword'(){
      this.test()
    }
  }
};
</script>
<style>
.search-page-container {
  position: relative;
  margin: 52px auto;
  width: 100%;
  z-index: 10;
  overflow-y: scroll;
}

.search-page-content {
  display: flex;
  align-items: flex-start;
  width: 1000px;
  margin: 20px auto;
}
.search-page-content > .left {
  min-width: 695px;
}
</style>